<template>
	<view class="switch-tab">
		<view class="tab-title" v-if="title">{{ title }}</view>
		<view class="tab-buttons">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-button" :class="{ active: currentTab === tab }"
				@click="currentTab = tab">
				{{ tab }}
			</view>
		</view>
		<slot :tab="currentTab"></slot>
	</view>
</template>

<script setup>
	import {
		ref,
		watch,
		onMounted
	} from 'vue';

	const props = defineProps({
		title: String,
		tabs: {
			type: Array,
			default: () => ['详情', '行程']
		},
		initialTab: {
			type: String,
			default: null
		}
	});

	const emit = defineEmits(['update:currentTab']);

	const currentTab = ref(props.initialTab || props.tabs[0]);

	watch(currentTab, (newValue) => {
		emit('update:currentTab', newValue);
	});

	onMounted(() => {
		if (props.initialTab && !props.tabs.includes(props.initialTab)) {
			console.warn(`Initial tab "${props.initialTab}" is not in the provided tabs list.`);
		}
	});
</script>

<style scoped>
	.switch-tab {
		font-family: "仓耳渔阳体 W05";
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		padding: 0 10rpx;
	}

	.tab-title {
		margin-bottom: 10px;
		font-weight: bold;
	}

	.tab-buttons {
		display: flex;
		gap: 10px;
		margin-bottom: 20px;
	}

	.tab-button {
		font-size: 40rpx;
		font-weight: 400;
		color: rgba(203, 203, 203, 1);
		padding: 8px 16px;
		transition: background-color 0.3s, color 0.3s;
	}

	.tab-button.active {
		font-size: 48rpx;
		font-weight: 400;
		color: rgba(56, 56, 56, 1);
		border-bottom: 10rpx solid rgba(56, 56, 56, 1);
	}
</style>